<template>
    <n-space>
        22
        <n-dropdown
            placement="bottom-start"
            trigger="click"
            size="small"
            :options="options"
            @select="handleSelect"
        >
            <n-button>小号</n-button>
        </n-dropdown>
        <n-dropdown
            placement="bottom-start"
            trigger="click"
            size="medium"
            :options="options"
            @select="handleSelect"
        >
            <n-button>中号</n-button>
        </n-dropdown>
        <n-dropdown
            placement="bottom-start"
            trigger="click"
            size="large"
            :options="options"
            @select="handleSelect"
        >
            <n-button>大号</n-button>
        </n-dropdown>
        <n-dropdown
            placement="bottom-start"
            trigger="click"
            size="huge"
            :options="options"
            @select="handleSelect"
        >
            <n-button>巨大号</n-button>
        </n-dropdown>
    </n-space>
</template>

<script lang="ts">
import { defineComponent } from "vue"
import { useMessage } from "naive-ui"
import {useRoute,useRouter} from "vue-router"
const options = [
    {
        label: "杰·盖茨比",
        key: "jay gatsby"
    },
    {
        label: "黛西·布坎南",
        key: "daisy buchanan"
    },
    {
        type: "divider",
        key: "d1"
    },
    {
        label: "尼克·卡拉威",
        key: "nick carraway"
    },
    {
        label: "其他",
        key: "others1",
        children: [
            {
                label: "乔丹·贝克",
                key: "jordan baker"
            },
            {
                label: "汤姆·布坎南",
                key: "tom buchanan"
            },
            {
                label: "其他",
                key: "others2",
                children: [
                    {
                        label: "鸡肉",
                        key: "chicken"
                    },
                    {
                        label: "牛肉",
                        key: "beef"
                    }
                ]
            }
        ]
    }
]

export default defineComponent({
    setup() {
        const router = useRouter()
        return {
            options,
            handleSelect(key) {
                router.push({path:"/about"})
            }
        }
    }
})
</script>
